<template>
	<view class="content">

		<!-- 人物身份信息 -->
		<view class="header pd_lr30 flex_both_end" @tap="setInformation">
			<view class="head_img">
				<image src="../../static/my_img/head_img.png" mode=""></image>
			</view>
			<view class="head_con pd_l20">
				<text class="font28">184****4147</text>
				<view class="head_con_box relative">
					<image class="m_t6" src="../../static/my_img/grade.png" mode=""></image>
					<text class="colorfff font26">LV.7</text>
				</view>
			</view>
			<view class="head_more m_r20">
				<image src="../../static/my_img/arrow_r.png" mode=""></image>
			</view>
		</view>

		<!-- 资产信息 -->
		<view class="money" @tap="totalDetail">
			<view class="mon_box colorfff">
				<view class="mon_top">
					<text class="font26 colorb6">总资产</text>
					<text class="font36">36588742.00</text>
				</view>
				<view class="mon_bot m_t10">
					<view class="mon_left">
						<text class="font26 colorb6">今日收益</text>
						<text class="font30">3,125.00</text>
					</view>
					<view class="mon_right">
						<text class="font26 colorb6">广告佣金</text>
						<text class="font30">3,125.00</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 三个选项 -->
		<view class="my_box border_bottom_gray font28">
			<view class="small_box" v-for="(item, index) in chooseList" :key="index" @tap="chooseClick(item.id)">
				<image :src="item.img" mode=""></image>
				<text class="m_t20">{{item.name}}</text>
			</view>
		</view>

		<!-- 广告图片 -->
		<view class="advertisement border_bottom_gray">
			<image src="../../static/my_img/advertisement.png" mode=""></image>
		</view>

		<!-- 个人设置列表 -->
		<view class="setList font30 color666 border_bottom_gray">
			<view class="hang border_bottom_ef" v-for="(item, index) in setList" :key="index" @tap="setClick(item.id)">
				<image :src="item.img" mode=""></image>
				<text>{{item.name}}</text>
				<image :src="item.arrow" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chooseList: [{
					"id": "1",
					"name": "安全设置",
					"img": "../../static/my_img/icon_1.png"
				},{
					"id": "2",
					"name": "账单明细",
					"img": "../../static/my_img/icon_2.png"
				},{
					"id": "3",
					"name": "邀请好友",
					"img": "../../static/my_img/icon_3.png"
				}],
				setList: [{
					"id": "1",
					"img": "../../static/my_img/list_1.png",
					"arrow": "../../static/my_img/arrow_r.png",
					"name": "好友列表"
				},{
					"id": "2",
					"img": "../../static/my_img/list_2.png",
					"arrow": "../../static/my_img/arrow_r.png",
					"name": "帮助反馈"
				},{
					"id": "3",
					"img": "../../static/my_img/list_3.png",
					"arrow": "../../static/my_img/arrow_r.png",
					"name": "关于AD"
				},{
					"id": "4",
					"img": "../../static/my_img/list_4.png",
					"arrow": "../../static/my_img/arrow_r.png",
					"name": "下载APP"
				},
				{
					"id": "5",
					"img": "../../static/my_img/list_4.png",
					"arrow": "../../static/my_img/arrow_r.png",
					"name": "支付方式"
				}
				]
			}
		},
		components: {

		},
		onLoad() {

		},
		methods: {
			// 前往个人信息独立页面
			setInformation() {
				uni.navigateTo({
					url: '../my/personal_information'
				});
			},
			
			// 前往个人总资产详情页面
			totalDetail() {
				uni.navigateTo({
					url: "../my/total_assets"
				})
			},
				
			// top的三个选项
			chooseClick(id) {
				if (id == 1) {
					uni.navigateTo({
						url: '../my/safe_set'
					});
				} else if (id == 2) {
					uni.navigateTo({
						url: '../my/bill_details'
					});
				} else if (id == 3) {
					uni.navigateTo({
						url: '../my/invite'
					});
				}
			},
			
			//个人设置-四个选项 
			setClick(id) {
				if (id == 1) {
					uni.navigateTo({
						url: "../my/friends_list"
					})
				} else if (id == 2) {
					uni.navigateTo({
						url: "../my/help"
					})
				} else if (id == 3) {
					uni.navigateTo({
						url: "../my/about"
					})
				} else if (id == 4) {
					uni.navigateTo({
						url: "../my/download"
					})
				}else if (id == 5) {
					uni.navigateTo({
						url: "../my/pay_type"
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		overflow: hidden;

		// 头部人物信息
		.header {
			display: flex;
			align-items: center;

			.head_img {
				image {
					width: 100upx;
					height: 100upx;
				}
			}

			.head_con {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.head_con_box {
					position: relative;

					image {
						width: 120upx;
						height: 45upx;
					}

					text {
						position: absolute;
						top: 10upx;
						left: 46upx;
					}
				}
			}

			.head_more {
				image {
					width: 16upx;
					height: 22upx;
				}
			}
		}

		// 资产信息
		.money {
			width: 100%;
			height: 250upx;
			position: relative;
			display: flex;
			justify-content: center;
			background-image: url(../../static/my_img/my_bg.png);
			background-size: 100% 100%;

			.mon_box {
				width: 85%;
				display: flex;
				flex-direction: column;
				position: absolute;
				bottom: 10upx;

				.mon_top {
					display: flex;
					flex-direction: column;
				}

				.mon_bot {
					display: flex;
					justify-content: space-between;

					.mon_left,
					.mon_right {
						display: flex;
						flex-direction: column;
					}
				}
			}
		}

		// 三个选择
		.my_box {
			padding: 20upx;
			display: flex;
			justify-content: center;

			.small_box {
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding: 20upx;

				image {
					width: 70upx;
					height: 70upx;
				}
			}
		}

		// 广告
		.advertisement {
			width: 100%;
			display: flex;

			image {
				width: 100%;
				height: 180upx;
			}
		}

		// 设置列表
		.setList {
			width: 100%;
			display: flex;
			flex-direction: column;

			.hang {
				width: 100%;
				padding: 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image:nth-of-type(1) {
					width: 60upx;
					height: 60upx;
				}

				image:nth-of-type(2) {
					width: 14upx;
					height: 20upx;
				}

				text {
					width: 80%;
				}
			}
		}

	}
</style>
